<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/my.css">
  <link rel="stylesheet" href="css/nest.css">
  <link rel="stylesheet" href="css/count.css">
</head>

<body>
  <h3>一. less 变量</h3>
  <code>
    @变量名: 值; (必须以@前缀, 不能包含特殊字符, 不能以数字开头, 大小写敏感)
    如: @jdcolor: #c81623;
  </code>
  <div class="logo"></div>

  <h3>二. less 编译</h3>
  <p>vscode eazy less 插件, 保存时自动将 less 文件转换为 css 文件</p>

  <h3>三. less 嵌套</h3>
  <p>如果遇到 交集|伪类|伪元素选择器</p>
  <ul>
    <li>内层选择器的前面没有 & 符号, 则它被解析为父选择器的后代</li>
    <li>若有 & 符号, 则被解析为父元素自身或者父元素的伪类</li>
  </ul>
  <div class="father">
    <a href="#">nest less</a>
    <div class="child"></div>
  </div>

  <h3>四. less 运算 (重点)</h3>
  <p>任何数字/颜色或者变量都可以参与运算 "+ - * /"</p>
  <ul>
    <li>运算符左右必须有一个空格隔开</li>
    <li>除法包裹在()里, 防止插件编译失效</li>
    <li>若只有一个单位则按该单位为准</li>
    <li>若有多个单位而且不一样, 则以第一个单位为准</li>
  </ul>
  <div class="count"><span>测试文字</span></div>
</body>

</html>